<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iSeaJs - switchable </title>
	
	<!--// 基础样式 -->
	<link type="text/css" rel="stylesheet" href="./assets/style/base.min.css" />

    <!--// 引入seajs -->
	<script src="./assets/scripts/sea-modules/seajs/2.1.1/sea.js" id="seajsnode"></script>
	<script src="./assets/scripts/sea-modules/config.js"></script>

<style>
	#demo1 { position: relative; width: 750px; padding-top: 29px; }
    #demo1 .ui-switchable-nav { position: absolute; left: 20px; margin-top: -29px; z-index: 99;list-style-type: none; }
    #demo1 .ui-switchable-nav li {
        float: left;
        width: 130px;
        height: 27px;
        line-height: 21px;
        text-align: center;
        background: url('./assets/images/switchable/tabs-sprite.gif') no-repeat 0 6px;
        margin-right: 3px;
        padding-top: 8px;
        cursor: pointer;
    }
    #demo1 .ui-switchable-nav li.ui-switchable-active { background-position: 0 -40px; cursor: default; }
    #demo1 .ui-switchable-content {
        position: relative;
        height: 120px;
        padding: 20px;
        border: 1px solid #AEC7E5;
    }
    .scrollable {
        position: relative;
        width: 820px;
		padding: 10px;
    }
    .scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
    .scrollable .prev { 
        left: 0; 
    }
    .scrollable .next { 
		right: 0;
	}
    .scrollable .disable { color: #ddd; cursor: default; }
    .scrollable .ui-switchable-nav {
        position: absolute;
        right: 30px;
        top: 0;
    }
    .scrollable .ui-switchable-nav li {
        float: left;
        padding: 3px 5px 0;
        font-size: 30px;
		line-height: 18px;
		height: 15px;
		overflow: hidden;
        cursor: pointer;
    }
    .scrollable .ui-switchable-nav li.ui-switchable-active {
        color: #C8282B;
    }
    .scroller {
        position: relative;
        width: 680px;
        height: 120px;
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
    .scroller .ui-switchable-content img {
        float: left;
        width: 100px;
        height: 75px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /<em> fix ie6 双边距 bug </em>/
    }
</style>
</head>

<body>


<div id="demo1" class="section">
    <ul class="ui-switchable-nav">
        <li>标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
        <li>标题 E</li>
    </ul>
    <div class="ui-switchable-content">
        <div>内容 A</div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
        <div style="display: none">内容 E</div>
    </div>
</div>


<div id="demo4" class="section scrollable" data-widget="carousel" data-effect="scrollx" data-easing="easeOutStrong" data-step="5" data-view-size="[680]" data-circular="true">
    <span id="scroller-prev" class="prev" data-role="prev">&lsaquo; 上一页</span>
    <span id="scroller-next" class="next" data-role="next">下一页 &rsaquo;</span>
    <div class="scroller">
        <div class="ui-switchable-content" data-role="content">
            <img alt="demo_img" src="./assets/images/switchable/321464099_a7cfcb95cf_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/2796719087_c3ee89a730_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/244441862_08ec9b6b49_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/66523124_b468cf4978_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/399223606_b875ddf797_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/399223609_db47d35b7c_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/321464104_c010dbf34c_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/117346184_9760f3aabc_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/399232237_6928a527c1_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/117346182_1fded507fa_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/3323896446_3b87a8bf75_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/3323897466_e61624f6de_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/3323058611_d35c894fab_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/3323893254_3183671257_t.jpg"/>
            <img alt="demo_img" src="./assets/images/switchable/3323893148_8318838fbd_t.jpg"/>
        </div>
        <ul class="ui-switchable-nav" data-role="nav">
            <li class="ui-switchable-active" title="1/3">&bull;</li>
            <li title="2/3">&bull;</li>
            <li title="3/3">&bull;</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
seajs.use(['$', 'tabs', 'carousel'], function ($, tabs, carousel) {
	$(function(){
		var demo1 = new tabs({
				element: '#demo1',
				triggers: '#demo1 .ui-switchable-nav li',
				panels: '#demo1 .ui-switchable-content div',
				activeIndex: 2,
				effect: 'fade'
			}).render();

		var demo4 = new carousel({
			element: '#demo4',
			panels: '#demo4 .ui-switchable-content img',
			//triggers: '#demo4 .ui-switchable-nav li',
			easing: 'easeOutStrong',
			effect: 'scrollx',
			step: 5,
			viewSize: [680],
			circular: true,
			prevBtn: '#scroller-prev',
			nextBtn: '#scroller-next'
		}).render();
	});
});
</script>


</body>
</html>